import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/a.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/entities/account_entity.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

import 'default_bottom_sheet.dart';

/// 选择账号
///
/// onChangeAccount 更改账号
/// onCreateAccount 创建账号
showAccountsBottomSheet(
  BuildContext context, {
  int accountId,
  List<AccountEntity> accounts,
  bool isScrollControlled = false,
  VoidCallback onCreateAccount,
  ValueChanged<AccountEntity> onChangeAccount,
}) =>
    showDefaultBottomSheet(context,
        child: Container(
          constraints: BoxConstraints(
              maxHeight: MediaQuery.of(context).size.height * 3 / 4),
          child: _AccountsWidget(
            accountId: accountId,
            accounts: accounts,
            onCreateAccount: onCreateAccount,
            onChangeAccount: onChangeAccount,
          ),
        ),
        isScrollControlled: true);

class _AccountsWidget extends StatelessWidget {
  final int accountId;
  final List<AccountEntity> accounts;
  final VoidCallback onCreateAccount;
  final ValueChanged<AccountEntity> onChangeAccount;

  const _AccountsWidget({
    Key key,
    this.accountId,
    this.accounts,
    this.onChangeAccount,
    this.onCreateAccount,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      shrinkWrap: true,
      itemBuilder: _buildItems,
      itemCount: accounts.length + 2,
    );
  }

  Widget _buildItems(BuildContext context, int index) {
    if (index == 0) {
      return buildAccountItem(null, accountId == null);
    }
    if (index == accounts.length + 1) {
      return PressedOpacityButton(
        onPressed: onCreateAccount,
        padding: EdgeInsets.symmetric(
          vertical: getDp(32),
          horizontal: getDp(41),
        ),
        border: Border(
          bottom: BorderSide(color: aceGrayColor, width: getDp(0.5)),
        ),
        child: Row(
          children: [
            Container(
              width: getDp(21),
              height: getDp(21),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: aceBlueColor,
              ),
              child: Image.asset(
                A.assetsImagesStyleAdd,
                width: getDp(12.5),
                height: getDp(12.5),
                fit: BoxFit.contain,
              ),
            ),
            SizedBox(
              width: getDp(30),
            ),
            Text(
              S.current.add_bank_account,
              style: TextStyle(
                color: aceBlueColor,
                fontSize: getSp(18),
                fontWeight: FontWeight.w700,
                height: 16 / 18,
              ),
            ),
          ],
        ),
      );
    }
    final item = accounts[index - 1];
    bool isSelect = accountId == item.id;
    return buildAccountItem(item, isSelect);
  }

  PressedOpacityButton buildAccountItem(AccountEntity item, bool isSelect) {
    return PressedOpacityButton(
      onPressed: () {
        onChangeAccount?.call(item);
      },
      child: Row(
        children: [
          Container(
            child: Text(
              item != null
                  ? '${item.bankName} ${item.accountNumber ?? ''}'
                  : S.current.all_accounts,
              style: TextStyle(
                color: isSelect ? aceBlueColor : aceBlackColor,
                fontSize: getSp(18),
                fontWeight: isSelect ? FontWeight.w700 : FontWeight.w400,
                height: 18 / 16,
              ),
            ),
            constraints: BoxConstraints(
              maxWidth: getDp(200),
            ),
          ),
          if (isSelect)
            Padding(
              padding: EdgeInsets.only(left: getDp(13)),
              child: SvgPicture.asset(
                A.assetsImagesInvitationSelected,
                width: getDp(20),
                height: getDp(20),
              ),
            ),
        ],
      ),
      padding: EdgeInsets.symmetric(
        horizontal: getDp(41),
        vertical: getDp(34),
      ),
      border: Border(
        bottom: BorderSide(color: aceGrayColor, width: getDp(0.5)),
      ),
    );
  }
}
